<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8" />
    <title>账单修复</title>
    <script th:src="@{/js/jquery.js}"></script>

</head>
<body>

<form name="billInfo">
	<table width="100%">
		<tr>
    		<td align="center"><h1>账单修复</h1></td>
    	</tr>
    </table>
    <table align="center">
        <tr>
            <td>设备ID:</td>
            <td>
            	<input id="deviceId" type="text" name="deviceId" style="width: 220px" />
            </td>
            <td>&emsp;&emsp;&emsp;&emsp;</td>
            <td>DeviceNo:</td>
            <td>
            	<input id="deviceNo" type="text" name="deviceNo" style="width: 220px" />
            </td>
            <td>&emsp;&emsp;&emsp;&emsp;</td>
            <td>开始时间:</td>
            <td>
            	<input id="startDate" type="date" name="startDate" style="width: 130px" />
            </td>
            <td>&emsp;&emsp;&emsp;&emsp;</td>
            <td>结束时间:</td>
            <td>
            	<input id="endDate" type="date" name="endDate" style="width: 130px" />
            </td>
        </tr>
    </table>
    <table>
    	<tr>
        	<td>&nbsp;</td>
		</tr>
    </table>
    <table align="center">
        <tr>
        	<td>
                <input type="button" value="下载账单" onclick="download()" />
            </td>
            <td>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</td>
            <td>
                <input type="file" id="file" name="myfile" style="display: none" />
				<!-- <input type="text" id="filename" style="display:none"></span> -->
            </td>
            <td>
            	<input type="button" onclick="upload()" value="上传账单" />
            </td>
		</tr>
    </table>
    <div id="result">
    </div>
</form>
</body>


<script type="text/javascript">


     //   $(document).ready(function(){
            function download(){
                var deviceId = billInfo.deviceId.value;
                var deviceNo = billInfo.deviceNo.value;
                var startDate = billInfo.startDate.value;
                var endDate = billInfo.endDate.value;
                if(deviceId == '' && deviceNo == ''){
               		alert('设备ID和设备号必须填一个！');
              		return false;
                }
                if(startDate == '' || endDate == ''){
                	alert('开始时间和结束时间必填！');
                }
                if(startDate > endDate){
                	alert('开始时间不能大于结束时间！');
              		return false;
                }
                var data = JSON.stringify({"deviceId":deviceId,"deviceNo":deviceNo,"startDate":startDate +' 00:00:00',"endDate":endDate +' 23:59:59'});
                excel_export("POST","/downloadBill", data)
            }

            function upload() {
                $("#file").click();
                $('#file').change(function (e) {
                 	var fileName = e.target.files[0];//js 获取文件对象
                 	if(fileName !== undefined){
                   		var file_typename =   fileName.name.substring(fileName.name.lastIndexOf('.'));
                   		if (file_typename === '.xlsx') {
                    		//$("#filename").css("display","block");
                    		//$("#filename").val(fileName.name);
                   			UploadFile(fileName);
                   		}else {
                   			alert("请选择正确的文件类型！");
                    	} 
                 	}else{
                 		alert("请选择正确的文件！");
                	}
            	});
            }

            /**
             * 公共导出功能
             * url：请求后台地址
             * data: 请求参数
             * type: 请求类型  post get
             * */
            function excel_export(type, url, data) {
                //var layerIndex=layer.msg('正在导出文件，请稍后...', {icon: 16,shade: 0.01,time: 100000 });
                var xhr=null;
                if (window.XMLHttpRequest) {//Mozilla 浏览器
                    xhr = new XMLHttpRequest();
                }else {
                    if (window.ActiveXObject) {//IE 浏览器
                        try {
                            xhr = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                        catch (e) {
                            try {//IE 浏览器
                                xhr = new ActiveXObject("Msxml2.XMLHTTP");
                            }
                            catch (e) {
                            }
                        }
                    }
                }
                xhr.open(type, url, true);
                xhr.responseType = "blob";
                xhr.setRequestHeader("Authorization", sessionStorage.getItem('cookieKey'));
                //post请求一定要添加请求头才行不然会报错
                if(type=='POST'){
                    xhr.setRequestHeader("Content-type","application/json");
                }
                xhr.onload = function() {
                    if (this.status == 200) {
                    	console.info(this.getResponseHeader("content-disposition"));
                        var fileName = this.getResponseHeader("content-disposition").split(";")[1].split("filename=")[1];
                        var blob = this.response;// this.response也就是请求的返回就是Blob对象
                        var a = document.createElement('a');
                        //一个字符串，表明该Blob对象所包含数据的MIME类型
                        blob.type = "application/excel";
                        var url = URL.createObjectURL(blob);
                        a.href = url;
                        $("body").append(a);
                        a.download = decodeURIComponent(fileName);
                        if(!!window.ActiveXObject || "ActiveXObject" in window){
                            window.navigator.msSaveOrOpenBlob(blob, fileName)
                        }else {
                            a.click()
                        }
                        window.URL.revokeObjectURL(url);
                    }else{
                      //  layer.msg('导出错误！')
                    }
                }
                xhr.send(data);
            }
            
            
            function UploadFile(fileObj) {
                var form = new FormData(); // FormData 对象
                form.append("file", fileObj); // 文件对象
                $.ajax({
                    url: '/uploadBill',                      //url地址
                    type: 'POST',                 //上传方式
                    data: form,                   // 上传formdata封装的数据
                    dataType: 'JSON',
                    cache: false,                  // 不缓存
                    processData: false,        // jQuery不要去处理发送的数据
                    contentType: false,         // jQuery不要去设置Content-Type请求头
                    success:function (data) {           //成功回调
                    	if(data.errcode == 200){
                    		alert("上传成功！");
                    	}
                    	else{
                    		alert("上传失败，请检查文件！");
                    	}
                    },
                    error:function (data) {           //失败回调
                    	alert("上传失败，请检查文件！");
                    }
                }); 
             }


    //    });
</script>
</html>